<template>
  <div class="app-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>素材管理</span>
      </div>
      <!-- card body -->
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane :label="'图片素材（'+assetsCount.image_count+')'" name="image" lazy>
          <material-file ref="imagePanel" file-type="image" @change="materialCount" />
        </el-tab-pane>
        <el-tab-pane :label="'语音素材（'+assetsCount.voice_count+')'" name="voice" lazy>
          <material-file ref="voicePanel" file-type="voice" @change="materialCount" />
        </el-tab-pane>
        <el-tab-pane :label="'视频素材（'+assetsCount.video_count+')'" name="video" lazy>
          <material-file ref="videoPanel" file-type="video" @change="materialCount" />
        </el-tab-pane>
        <el-tab-pane :label="'图文素材（'+assetsCount.news_count+')'" name="news" lazy>
          <material-news ref="newsPanel" @change="materialCount" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { mediaGetCount } from '../api/wx-news-template'

export default {
  components: {
    MaterialFile: () => import('../components/assets/material-file'),
    MaterialNews: () => import('../components/assets/material-news')
  },
  data() {
    return {
      activeTab: 'image',
      assetsCount: {
        image_count: 0,
        video_count: 0,
        voice_count: 0,
        news_count: 0,
        thumb_count: 0
      }
    }
  },
  mounted() {
    this.materialCount()
  },
  methods: {
    handleTabClick(tab, event) {
      this.$nextTick(() => {
        this.$refs[tab.name + 'Panel'].init()
      })
    },
    materialCount() {
      mediaGetCount().then(({ data }) => {
        this.assetsCount = data
      })
    }

  }
}
</script>
